<template>
  <div class="ele-body">
    <el-card shadow="never">
      <ele-pro-table
        ref="table"
        method="get"
        row-key="RoleID"
        :datasource="url"
        :columns="columns"
        :request="defaultTableRequest"
        :response="defaultTableResponse"
        :size="defaultTableSize">
        <template slot="toolbar">
          <el-button
            v-if="power.create"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="addOrEdit(false)">添加
          </el-button>
        </template>
        <template slot="action" slot-scope="{row, $index}">
          <template v-if="power.groupAuth.action">
            <el-link
              v-if="power.update"
              @click="addOrEdit(row)"
              icon="el-icon-edit"
              type="primary"
              :underline="false">修改
            </el-link>
            <el-link
              v-if="power.node"
              @click="addOrEdit(row, 2)"
              icon="el-icon-set-up"
              type="primary"
              :underline="false">权限分配
            </el-link>
            <el-popconfirm v-if="power.delete" class="ele-action" title="确定要删除此角色吗？" @confirm="onRemove(row,$index)">
              <el-link slot="reference" icon="el-icon-delete" type="danger" :underline="false">删除</el-link>
            </el-popconfirm>
          </template>
          <template v-else> ---</template>
        </template>
      </ele-pro-table>
    </el-card>

    <!-- 编辑弹窗 -->
    <save-role :data="current" :visible.sync="showEdit" @done="reload"/>
    <role-power
      :menu="menuList"
      :roleId="current.RoleID ? Number(current.RoleID) : 0"
      :checked="current.NodeID ? current.NodeID : false"
      :visible.sync="showPower"
      @done="reload"/>
  </div>
</template>

<script>
  import SaveRole from "./save";
  import columns from '@/config/columns/role'
  import RolePower from '@/components/role/configure-permissions'

  export default {
    name: "role-index",
    components: {
      SaveRole,
      RolePower
    },
    data() {
      return {
        // 列表定义
        columns,
        // 表格数据接口
        url: '/role',
        // 当前编辑数据
        current: {},
        // 是否显示编辑弹窗
        showEdit: false,
        // 是否显示编辑弹窗-权限
        showPower: false,
        // 菜单节点数据
        menuList: [],
        // 权限
        power: {}
      }
    },
    created() {
      let auth = {
        create: 'role:create',
        update: 'role:update',
        node: 'role:node',
        delete: 'role:delete',
      }
      this.power = this.$roleListPermission(auth, {
        action: ['update', 'node', 'delete']
      })
    },
    methods: {
      /* 加载菜单列表 */
      loadMenuList() {
        this.$http.get('/node').then(res => {
          if (res.data.code === 200) {
            let menu = res.data.result.list.map(res => {
              res.id = Number(res.NodeID)
              return res
            })
            this.menuList = this.$util.toTreeData(menu, 'NodeID', 'ParentID');
          }
        })
      },
      /* 刷新表格 */
      reload() {
        this.$refs.table.reload();
      },
      /* 修改行 */
      addOrEdit(row, type = 1) {
        let current = row ? Object.assign(row, {}) : {};
        if (type === 1) {
          this.showEdit = true
          this.current = {
            RoleName: current.RoleName || '',
            RoleDesc: current.RoleDesc || '',
            RoleID: current.RoleID || 0,
            IsStaffShow: current.IsStaffShow || 0
          }
        } else {
          if (!this.menuList.length) {
            this.loadMenuList()
          }
          this.current = {
            RoleID: current.RoleID,
            NodeID: current.NodeID
          }
          this.showPower = true
        }
      },
      /* 删除行 */
      onRemove(row) {
        const loading = this.$loading({lock: true});
        this.$http.post('/role/delete', {RoleID: row.RoleID}).then(res => {
          loading.close();
          if (res.data.code === 200) {
            this.$message({type: 'success', message: res.data.msg});
            this.reload();
          }
        }).catch(() => {
          loading.close();
        });
      },
    }
  }
</script>

